<template>
<div id="footer">
    <van-tabbar v-model="active">
        <van-tabbar-item
          :icon="item.icon"
          :info="item.info"
          :dot="item.dot"
          @click="footerNavigateTo(item)"
          v-for="(item,index) in footerlist"
          :key="index">{{ item.name }}</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
let buyersFooterList = [
  {
    index: 0,
    name: '首页',
    path: '/home',
    icon: 'wap-home',
    dot: false,
    info: ''// 此处为空时 dom不显示
  },
  // {
  //   index: 1,
  //   name: '师生信',
  //   path: '/teachAndStus',
  //   icon: 'records',
  //   dot: true,
  //   info: ''
  // },
  {
    index: 2,
    name: '我的',
    path: '/mine',
    icon: 'contact',
    dot: false,
    info: ''
  }
]
export default {
  data () {
    return {
      active: 0,
      footerlist: buyersFooterList
    }
  },
  props: ['index'],
  mounted () {
    this.active = this.index
  },
  methods: {
    // 点击底部跳转到对应的path
    footerNavigateTo (obj) {
      this.$router.push({path: obj.path})
    }
  },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>
<style lang="scss" scoped>
#footer .van-tabbar-item--active {
  color: #2196f3 !important;
}
</style>
